
<template>
  <!--核收开窗-->
  <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="知识库展示" :visible.sync="dialogKnowledgeVisible" @close="KnowledgetClose()" v-if="dialogKnowledgeVisible" width="880px">
      <div style="height:600px;border:1px solid #ccc">

          <div style="height: 100%;width: 150px;background-color:#545c64">
              <el-menu default-active="0" @select="itemselect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                  <el-menu-item :index="index+''" :key="item.ItemCode" v-for="(item,index) in tableData" class="el-menu-vertical-demo">
                      <span slot="title">{{ item.Rpt_ItemName }}</span>
                  </el-menu-item>
              </el-menu>
          </div>
          <div style="margin-left: 150px;top: 53px;position: absolute;width:calc(100% -  192px);background-color:#545c64">
              <el-menu default-active="1" @select="detailselect" class="el-menu-demo" mode="horizontal" background-color="#0095d9" text-color="#fff" active-text-color="#ffd04b" v-model="detailval">
                  <el-menu-item index="1">
                      <span slot="title">知识点</span>
                  </el-menu-item>
                  <el-menu-item index="2">
                      <span slot="title">基础信息</span>
                  </el-menu-item>
                  <el-menu-item index="3" v-show="tabbasespecdata.length > 0">
                      <span slot="title">标本类型</span>
                  </el-menu-item>
                  <el-menu-item index="4" v-show="tabbasediagdata.length > 0">
                      <span slot="title">诊断</span>
                  </el-menu-item>
                  <el-menu-item index="5" v-show="tabbasesexdata.length > 0">
                      <span slot="title">性别</span>
                  </el-menu-item>
              </el-menu>
              <div style="width: 100%" class="knowledge">
                  <el-collapse v-model="activeInfos" v-if="detailindex == 1">
                      <el-collapse-item :title="info.infotypename" :name="index + 1" :key="index" v-for="(info,index) in tabbaseinfodata">
                          <div>{{ info.contents }}</div>
                      </el-collapse-item>
                  </el-collapse>

                  <el-collapse v-model="activeNames" v-if="detailindex == 2">
                      <el-collapse-item title="项目代码" name="1">
                          <div>{{ tabbasedata.itemcode }}</div>
                      </el-collapse-item>
                      <el-collapse-item title="项目名称" name="2">
                          <div>{{ tabbasedata.itemname }}</div>
                      </el-collapse-item>
                      <el-collapse-item title="项目大类" name="3">
                          <div>{{ tabbasedata.germflagname }}</div>
                      </el-collapse-item>
                      <el-collapse-item title="项目归类" name="4">
                          <div>{{ tabbasedata.itemclassname }}</div>
                      </el-collapse-item>
                      <el-collapse-item title="英文缩写" name="5">
                          <div>{{ tabbasedata.itemcode_en }}</div>
                      </el-collapse-item>
                      <el-collapse-item title="英文名称" name="6">
                          <div>{{ tabbasedata.itemname_en }}</div>
                      </el-collapse-item>
                      <el-collapse-item title="项目备注" name="7">
                          <div>{{ tabbasedata.itemtips }}</div>
                      </el-collapse-item>
                      <el-collapse-item title="LOINC编码" name="8">
                          <div>{{ tabbasedata.loinccode }}</div>
                      </el-collapse-item>
                  </el-collapse>

                  <el-collapse v-model="activespec" v-if="detailindex == 3">
                      <el-collapse-item title="适用标本类型" name="1">
                          <div v-for="(spec,index) in tabbasespecdata" :key="index">{{ spec.specimenname }}</div>
                      </el-collapse-item>
                  </el-collapse>

                  <el-collapse v-model="activediag" v-if="detailindex == 4">
                      <el-collapse-item title="适用诊断" name="1">
                          <div v-for="(diag,index) in tabbasediagdata" :key="index">({{ diag.diagicd10 }}){{ diag.diagname }}</div>
                      </el-collapse-item>
                  </el-collapse>

                  <el-collapse v-model="activesex" v-if="detailindex == 5">
                      <el-collapse-item title="适用性别" name="1">
                          <div v-for="(sex,index) in tabbasesexdata" :key="index">{{ sex.pat_sex == '1'?'男':sex.pat_sex == '2'?'女':'未知' }}</div>
                      </el-collapse-item>
                  </el-collapse>
              </div>
          </div>
      </div>
      <!-- <div>
          <el-tabs tab-position="left" style="height: 600px;" @tab-click="handleClick">
              <el-tab-pane :label="item.Rpt_ItemName" :name="item.ItemCode" :key="item.ItemCode" v-for="(item,index) in tableData">
                  <div>
                      <el-tabs>
                          <el-tab-pane label="知识点">
                              <el-collapse v-model="activeInfos">
                                  <el-collapse-item :title="info.infotypename" :name="index + 1" :key="index" v-for="(info,index) in tabbaseinfodata">
                                      <div>{{ info.contents }}</div>
                                  </el-collapse-item>
                              </el-collapse>
                              <!-- <div v-for="lst in InfoList[index].lstInfo" :key="lst.infotype">

                              </div>
                          </el-tab-pane>
                          <el-tab-pane label="基础信息">
                              <el-collapse v-model="activeNames">
                                  <el-collapse-item title="项目代码" name="1">
                                      <div>{{ tabbasedata.itemcode }}</div>
                                  </el-collapse-item>
                                  <el-collapse-item title="项目名称" name="2">
                                      <div>{{ tabbasedata.itemname }}</div>
                                  </el-collapse-item>
                                  <el-collapse-item title="项目大类" name="3">
                                      <div>{{ tabbasedata.germflagname }}</div>
                                  </el-collapse-item>
                                  <el-collapse-item title="项目归类" name="4">
                                      <div>{{ tabbasedata.itemclassname }}</div>
                                  </el-collapse-item>
                                  <el-collapse-item title="英文缩写" name="5">
                                      <div>{{ tabbasedata.itemcode_en }}</div>
                                  </el-collapse-item>
                                  <el-collapse-item title="英文名称" name="6">
                                      <div>{{ tabbasedata.itemname_en }}</div>
                                  </el-collapse-item>
                                  <el-collapse-item title="项目备注" name="7">
                                      <div>{{ tabbasedata.itemtips }}</div>
                                  </el-collapse-item>
                                  <el-collapse-item title="LOINC编码" name="8">
                                      <div>{{ tabbasedata.loinccode }}</div>
                                  </el-collapse-item>
                              </el-collapse>
                          </el-tab-pane>
                          <el-tab-pane label="标本类型" v-show="InfoList[index].lstSpecimen.length > 0">

                          </el-tab-pane>
                          <el-tab-pane label="诊断" v-show="InfoList[index].lstDiag.length > 0">

                          </el-tab-pane>
                          <el-tab-pane label="性别" v-show="InfoList[index].lstSex.length > 0">

                          </el-tab-pane>
                      </el-tabs>
                  </div>
              </el-tab-pane>
          </el-tabs>
      </div> -->
  </el-dialog>
</template>

<script>
export default {
  name: "KnowledgeShow",
  data() {
      return {
          dialogKnowledgeVisible: false,
          tableData: [],
          InfoList: [],
          tabInfoData: [],
          activeNames: ["1", "2", "3", "4", "5", "6", "7", "8"],
          activeInfos: [1, 2, 3],
          activespec: ["1"],
          activediag: ["1"],
          activesex: ["1"],
          tabbaseinfodata: [],
          tabbasedata: [],
          tabbasespecdata: [],
          tabbasediagdata: [],
          tabbasesexdata: [],
          detailindex: 1,
          detailval: 1,
      };
  },
  watch: {},
  created() {},
  methods: {
      GetShowData(reportid) {
          this.$tool
              .request({
                  url: "ucent/knowledgeshow",
                  method: "post",
                  data: {
                      action: "getdatabyrpt",
                      reportid: reportid,
                  },
              })
              .then((res) => {
                  if (res) {
                      console.log(res);
                      this.tableData = res.data;
                      this.InfoList = res.liblist;
                      this.ShowTabInfo("0");
                  }
              })
              .catch((e) => {
                  console.log("erro", e);
              });
      },
      ShowInfo(reportid) {
          this.GetShowData(reportid);
          this.dialogKnowledgeVisible = true;
      },
      KnowledgetClose() {
          this.dialogKnowledgeVisible = false;
      },
      handleClick(tab, event) {
          this.ShowTabInfo(tab.index);
      },
      itemselect(index, indexPath) {
          this.ShowTabInfo(index);
          this.detailindex = 1;
          this.detailval = 1;
      },
      detailselect(index, indexPath) {
          this.detailindex = index;
      },
      //01=基本信息；11=适应症状和疾病，12=样本采集要求，21=试剂，22=质控，23=定标，24=检验方法过程；31=参考范围，32=危急值范围；41=临床意义；81=注意事项
      InfoType(val) {
          let infotypename = val;
          switch (val) {
              case "01": {
                  infotypename = "基本信息";
                  break;
              }
              case "11": {
                  infotypename = "适应症状和疾病";
                  break;
              }
              case "12": {
                  infotypename = "样本采集要求";
                  break;
              }
              case "21": {
                  infotypename = "试剂";
                  break;
              }
              case "22": {
                  infotypename = "质控";
                  break;
              }
              case "23": {
                  infotypename = "定标";
                  break;
              }
              case "24": {
                  infotypename = "检验方法过程";
                  break;
              }
              case "31": {
                  infotypename = "参考范围";
                  break;
              }
              case "32": {
                  infotypename = "危急值范围";
                  break;
              }
              case "41": {
                  infotypename = "临床意义";
                  break;
              }
              case "81": {
                  infotypename = "注意事项";
                  break;
              }
              case "82": {
                  infotypename = "干扰因素";
                  break;
              }
          }
          return infotypename;
      },
      Germflag(val) {
          let germflagname = val;
          switch (val) {
              case "0": {
                  germflagname = "普通检验项目";
                  break;
              }
              case "1": {
                  germflagname = "细菌阴性项目";
                  break;
              }
              case "2": {
                  germflagname = "致病菌";
                  break;
              }
              case "3": {
                  germflagname = "正常菌种";
                  break;
              }
              case "4": {
                  germflagname = "涂片结果";
                  break;
              }
              case "9": {
                  germflagname = "非检验项目";
                  break;
              }
          }
          return germflagname;
      },
      ShowTabInfo(index) {
          this.tabbaseinfodata = this.InfoList[index].lstInfo;
          for (let i = 0; i < this.tabbaseinfodata.length; i++) {
              this.tabbaseinfodata[i].infotypename = this.InfoType(this.tabbaseinfodata[i].infotype);
          }
          //基础数据
          this.tabbasedata = this.InfoList[index];
          this.tabbasedata.germflagname = this.Germflag(this.tabbasedata.germflag);
          this.tabbasespecdata = this.InfoList[index].lstSpecimen;
          this.tabbasediagdata = this.InfoList[index].lstDiag;
          this.tabbasesexdata = this.InfoList[index].lstSex;
      },
  },
};
</script>
<style scoped>
/deep/.is-left .el-tabs__content {
  top: 54px;
  left: 150px;
}
/deep/.el-collapse-item__header {
  height: 24px;
  line-height: 24px;
}
/deep/.el-menu-item.is-active.el-menu-vertical-demo {
  color: #fff !important;
  background-color: #20c465 !important;
}
/deep/.el-menu-item.el-menu-vertical-demo:hover .el-menu-item.el-menu-vertical-demo:focus {
  color: #fff !important;
  background-color: #20c465 !important;
}
</style>
